<template>
  <div class="detail-page" v-if="infoList">
    <div class="detail-bg">
      <div class="top">
      <div @click="goback" class="arrow-left">
        <img src="../assets/images/album_main_back.png" alt="" />
      </div>
      <div class="list-right">
        <img
          class="wechat"
          src="../assets/images/album_main_wechat.png"
          alt=""
        />
        <img src="../assets/images/album_main_pyq.png" alt="" />
        <img class="dots" src="../assets/images/album_main_more.png" alt="" />
      </div>
      </div>
    <div class="content" v-if="detailList" ref="scrollRef">
      <div class="wrap-img" v-if="authorId!=123564">
        <img :src="'https://pic.ecook.cn/web/'+ detailList.imageid+'.jpg!wl280'" alt="" />
      </div>
      <div class="wrap-img" v-else>
        <img :src="'blob:http://localhost:8080/'+ detailList.imageid+''" alt="" />
      </div>
      <div class="cuisine-info">
        <div class="details">
          <div class="cuisine-name conpd">
            <h4>{{ detailList.name }}</h4>
          </div>
          <div class="hot-info conpd">
            <div class="collect">{{ infoList.collectionCount }}人收藏</div>
            <div class="zan">{{ infoList.likeCount }}人点赞</div>
          </div>
          <div class="person-info conpd">
            <div class="head-top">
              <router-link
                tag="div"
                :to="'/author?id=' + detailList.authorid"
                class="hd-info"
              >
                <div class="hd-img">
                  <img :src="'https://pic.ecook.cn/web/'+ detailList.authorimageid+'.jpg!s1'" alt="" />
                </div>
                <div class="hd-name">{{ detailList.authorname }}</div>
              </router-link>
              <div class="hd-gz" v-if="!isfollow" @click="addfollow(detailList.authorid)">
                <img src="../assets/images/36客户关注.png" alt="" />
                <span class="gz">关注</span>
              </div>
              <div class="hd-gz follow" v-if="isfollow" @click="addfollow(detailList.authorid)">
                <img src="../assets/images/已关注.png" alt="" />
                <span class="gz">取消关注</span>
              </div>
            </div>
            <div class="head-btm">{{ detailList.description }}</div>
          </div>
          <div class="nd-food conpd">
            <div class="nd-top">
              <h4>需要食材</h4>
              <div :class="['lz',{'active':!isBasket}]" @click="addLz">
                <img src="../assets/images/菜篮子.png" alt="" v-show="isBasket" />
                <span class="add-lz" v-show="isBasket">加入菜篮子</span>
                <img src="../assets/images/禁止的.png" alt="" v-show="!isBasket" />
                <span class="add-lz" v-show="!isBasket">移出菜篮子</span>
              </div>
            </div>
            <div class="nd-btm">
              <div
                :class="['fd-item',{'maternone':item.name==''}]"
                v-for="(item, index) in detailList.materialList"
                :key="index"
              >
                <span v-if="item.name!=''">{{ item.name }}</span>
                <span v-if="item.dosage!=''">{{ item.dosage }}</span>
              </div>
            </div>
          </div>
          <div class="pr-step conpd">
            <div class="pr-top">
              <h4>烹饪步骤</h4>
              <div class="pr-in">
                <span class="pr">进入烹饪模式</span>
                <img src="../assets/images/进入箭头.png" alt="" />
              </div>
            </div>
            <div class="pr-step-list">
              <div
                class="pr-step-item"
                v-for="(item, index) in detailList.stepList"
                :key="index"
              >
                <h4 class="sp">
                  步骤 <span v-if="detailList.stepList[0].ordernum==0">{{ item.ordernum +1 }}</span
                  >
                  <span v-if="detailList.stepList[0].ordernum!=0">{{ item.ordernum }}</span
                  >
                  <span class="all-steps">/{{ detailList.stepList.length }}</span>
                </h4>
                <div class="step-img" @click="showImg(index)">
                  <img v-if="authorId!=123564"  :src="'https://pic.ecook.cn/web/'+ item.imageid+'.jpg!wl280'" alt="" v-lazy="'https://pic.ecook.cn/web/'+ item.imageid+'.jpg!wl280'" v-show="flag" />
                  <img v-else  :src="'blob:http://localhost:8080/'+ item.imageid+''" alt="" v-lazy="'blob:http://localhost:8080/'+ item.imageid+''" v-show="flag" />
                  <div class="big" v-show="show == index && !flag">
                    <div
                      class="img"
                      v-if="authorId!=123564"
                      :style="{ 'background-image': 'url(https://pic.ecook.cn/web/'+item.imageid+'.jpg!wl280)' }"
                    ></div>
                    <div
                      class="img"
                      v-else
                      :style="{ 'background-image': 'url(blob:http://localhost:8080/'+item.imageid+')' }"
                    ></div>
                  </div>
                </div>
                <div class="step-tips" v-html="item.details"></div>
              </div>
            </div>
          </div>
          <div class="lt-tips" v-if="detailList.tipList.length">
            <div class="tips-content" v-if="detailList.tipList[0].details">
              <div class="tips-title">
                <img src="../assets/images/ic_detail_tips.png" alt="" />
                <span class="tips-name">小贴士</span>
              </div>
              <ul class="txt">
                <li v-for="(item, index) in detailList.tipList" :key="index">
                  {{ item.details }}
                </li>
              </ul>
            </div>
          </div>
          <div class="relate-cuisine" v-if="relatedList">
            <h4 class="title conpd">相关菜谱</h4>
            <div class="rela-lists">
              <div
                class="rela-list-item"
                v-for="(item,index) in relatedList"
                :key="index"
                @click="showDeatil(item.url)"
              >
                <div class="item-img">
                  <div
                    class="img"
                    :style="{
                      'background-image': 'url(https://pic.ecook.cn/web/'+item.imageid+'.jpg!wl280)',
                    }"
                    v-lazy:background-image="'https://pic.ecook.cn/web/'+item.imageid+'.jpg!wl280'"
                  ></div>
                </div>
                <h4 class="c-name">{{ item.title }}</h4>
              </div>
            </div>
          </div>
          <div class="zp conpd">
            <div class="zp-title">
              <h4 class="title">作品秀</h4>
              <div class="more">
                <span class="m">查看全部</span>
                <img src="../assets/images/进入箭头.png" alt="" />
              </div>
            </div>
            <div class="zpCon" v-if="infoList.work.length!=0">
              <router-link tag="div" :to="'/simpletalk?id='+item.id" class="zpItem" v-for="item in infoList.work" :key="item.id">
                <div class="img">
                  <img :src="'https://pic.ecook.cn/web/'+ item.imageid+'.jpg!wl280'" alt="">
                </div>
                <div class="zpTitle line-ellipsis">{{item.text}}</div>
                <div class="zpAuthor">{{item.nickname}}</div>
              </router-link>
            </div>
            <div class="send-zp">
              <img src="../assets/images/照相机.png" alt="" />
              <span class="send">上传我的作品</span>
            </div>
          </div>
          <div class="pl conpd">
            <div class="pl-top">
              <h4 class="title">评论&nbsp;{{infoList.commentCount}}条</h4>
              <div class="more">
                <span class="m" @click="showAllCom">查看全部</span>
                <img src="../assets/images/进入箭头.png" alt="" />
              </div>
            </div>
            <div class="pl-lists" v-if="infoList.comment || infoList.comment.length">
              <div class="pl-item" v-for="(item,index) in infoList.comment" :key="index">
                <div class="pl-img">
                  <img :src="'https://pic.ecook.cn/web/'+ item.userimageid+'.jpg!wl280'" alt="" />
                </div>
                <div class="pl-msg">
                  <span class="msg-name">{{item.username}}:</span>
                  <span class="msg">{{item.text}}</span>
                </div>
              </div>
            </div>
            <div class="pl-btm-ipn" @click="openSend">
              <span class="rep">快捷回复</span>
              <div class="emo">
                <img src="../assets/images/Expression_3.png" alt="" />
                <img src="../assets/images/Expression_12.png" alt="" />
                <img src="../assets/images/item_guanzhu_red.png" alt="" />
              </div>
            </div>
          </div>
          <div class="fd-album" v-if="collectionSortList">
            <h4 class="title conpd">包含该菜谱的专辑</h4>
            <div class="fd-album-list">
              <div class="fd-album-item" v-for="item in collectionSortList" :key="item.id" @click="goSortList(item.id)">
                <div class="album-img" :style="{
                      'background-image': 'url(https://pic.ecook.cn/web/'+item.imageid+'.jpg!wl280)',
                    }"
                    v-lazy:background-image="'https://pic.ecook.cn/web/'+item.imageid+'.jpg!wl280'"
                    >
                  <!-- <img :src="'https://pic.ecook.cn/web/'+ item.imageid+'.jpg!wl280'" alt="" /> -->
                </div>
                <div class="album-info">
                  <h4>{{item.name}}</h4>
                  <span class="album-txt"
                    >{{item.recipeCount}}道菜谱&nbsp;&nbsp;&nbsp;{{item.author}}</span
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="btm-pl bt" @click="showAllCom">
        <img src="../assets/images/3.1 评论.png" alt="" />
        <span class="pl-txt">评论</span>
      </div>
      <div class="btm-zan bt" @click="checkedDz">
        <img
          src="../assets/images/ic_home_like.png"
          alt=""
          v-if="!Dzflag"
        />
        <img src="../assets/images/点赞.png" alt="" v-if="Dzflag" />
        <span class="pl-txt" v-if="!Dzflag">点赞</span>
        <span
          :class="['pl-txt', { checked: Dzflag }]"
          v-if="Dzflag"
          >已点赞</span
        >
      </div>
      <div
        :class="['btm-collet', 'bt', { 'bt-collect': collectflag }]"
        @click="collectadd"
      >
        <img
          src="../assets/images/收藏.png"
          alt=""
          v-if="!collectflag"
        />
        <img
          src="../assets/images/kecheng_vipcard_icon.png"
          alt=""
          v-if="collectflag"
        />
        <span class="pl-txt" v-if="!collectflag">收藏</span>
        <span class="pl-txt" v-if="collectflag">已收藏</span>
      </div>
    </div>
    </div>
    <div class="loading" v-if="loading">
      <div class="loadingImg">
        <img src="../assets/images/loading_ecook.png" alt="">
      </div>
    </div>
    <send-view v-if="showInp" @send="send"  :show-inp="showInp" @close="close" ></send-view>
  </div>
</template>

<script>
import SendView from '../components/SendView.vue'
import {getdetailsData,getRecipeInfoData,getRecipeRelatedListData,getCollectionSortListData} from '../api/deatils'
export default {
  data() {
    return {
      infoList: null, //菜谱其他信息
      detailList: null, //菜品详情
      relatedList:null, //相关菜谱
      collectionSortList:null, //相关菜谱专辑
      show: -1, //图片放大
      flag: true,
      infoId: null,
      authorId: null,
      detailId: null,
      collectList: [],
      likeList:[],
      showInp:false,
      userId:null,
      checkTxt:null,
      lzLists:[],//菜篮子数据
      isBasket:true,//是否加入菜篮子
      collectflag:false,//是否收藏
      Dzflag:false,//是否点赞
      loading:true,//加载效果
      cookId:null,//菜谱ID
      isfollow:false,//关注
      follows:[],//关注列表
    };
  },
  methods: {
    //获取菜谱详情
    getDetailsFun(id){
      getdetailsData(id).then(data=>{
        console.log(data);
        if (data.data) {
          setTimeout(() => {
            this.loading = false
          }, 400);
          this.detailList=data.data
        }else{
          setTimeout(() => {
            this.$toast("加载失败")
            this.$router.push("/home")
          }, 400);
        }
        this.updateDate(this.detailList)
      })
    },
    //获取菜谱相关信息
    getRecipeInfoFun(id){
      getRecipeInfoData({id}).then(data=>{
        console.log(data);
        if (data.info) {
          setTimeout(() => {
            this.loading = false
          }, 400);
          this.infoList = data.info
          this.infoUpdate(this.infoList)
        }else{
          setTimeout(() => {
            this.$toast("加载失败")
            this.$router.push("/home")
          }, 400);
        }
      })
    },
    //相关菜谱数据
    getRecipeRelatedListFun(id){
      getRecipeRelatedListData({id}).then(data=>{
        console.log(data);
        if (data.list) {
          this.relatedList = data.list
        }
      })
    },
    //相关菜谱专辑数据
    getCollectionSortListFun(id){
      getCollectionSortListData({cid:id}).then(data=>{
        console.log(data);
        if (data.data) {
          this.collectionSortList = data.data
        }
      })
    },
    //相关菜谱跳转详情页
    showDeatil(url) {
      // console.log(url.split("?")[1].split("=")[1])
      this.$refs.scrollRef.scrollTop = 0
      this.loading = true
      let id = url.split("?")[1].split("=")[1]
      this.$router.push({ path: "/detail", query: { id } });

      this.isBasket = true
      this.collectflag = false
      this.Dzflag = false
      this.isfollow = false

      // 获取菜品详情数据
      this.getDetailsFun(id)
      //获取菜谱其他信息
      this.getRecipeInfoFun(id)
      // 相关菜谱列表
      this.getRecipeRelatedListFun(id)
      // 相关菜谱专辑列表
      this.getCollectionSortListFun(this.$route.query.id)
    },
    showImg(index) {
      this.flag = !this.flag;
      this.show = index;
    },
    //加入菜篮子
    addLz(){
      this.isBasket=!this.isBasket
      let index = this.lzLists.findIndex(item=>item.id===this.detailList.id)
      if (!this.isBasket) {
        if (index===-1) {
          this.lzLists.unshift({
            id:this.detailList.id,
            imageid:this.detailList.imageid,
            name:this.detailList.name,
            materialList:this.detailList.materialList
          })
        }
        this.$toast("加入菜篮子成功");
      }else{
        this.lzLists.splice(index,1)
        this.$toast("移除菜篮子成功");
      }
      window.localStorage.setItem("lzLists",JSON.stringify(this.lzLists))
    },
    //收藏
    collectadd() {
      let token = window.localStorage.getItem("token");
      if (!token) {
        this.$router.push("/login");
        return;
      }
      this.collectflag=!this.collectflag
      let index = this.collectList.findIndex(item=>item.id===this.infoList.id)
      if (this.collectflag) {
        this.$toast("加入收藏成功");
        this.infoList.collectionCount=Number(this.infoList.collectionCount)+1
        if (index==-1) {
          this.collectList.push({
          id:this.infoList.id,
          authorname:this.detailList.authorname,
          imageid:this.detailList.imageid,
          name:this.detailList.name
        })
        }
      }else{
        this.$toast("取消收藏成功");
        this.infoList.collectionCount=Number(this.infoList.collectionCount)-1
        this.collectList.splice(index,1)
      }
      window.localStorage.setItem("collectList",JSON.stringify(this.collectList))
    },
    //点赞
    checkedDz() {
      let token = window.localStorage.getItem("token");
      if (!token) {
        this.$router.push("/login");
        return;
      }
      this.Dzflag=!this.Dzflag
      let index = this.likeList.findIndex(item=>item.id===this.infoList.id)
      if (this.Dzflag) {
        this.infoList.likeCount = Number(this.infoList.likeCount) + 1
        if (index==-1) {
          this.likeList.push({
            id:this.infoList.id,
            likeCount:this.infoList.likeCount
          })
        }
        this.$toast("点赞成功");
      }else{
        this.infoList.likeCount = Number(this.infoList.likeCount) - 1
        this.likeList.splice(index,1)
        this.$toast("取消点赞成功");
      }
      window.localStorage.setItem("likeList",JSON.stringify(this.likeList))

    },
    //关注
    addfollow(id){
      // console.log(id);
      if (id!=123564) {
        let index = this.follows.findIndex(item=>item.id==id)
        this.isfollow=!this.isfollow
        if (this.isfollow) {
            if (index==-1) {
                this.follows.push({
                    id,
                    imageid:this.detailList.authorimageid,
                    profile:"这家伙很懒，什么都没有留下",
                    star:0,
                    name:this.detailList.authorname
                })
            }
        }else{
            this.follows.splice(index,1)
        }
        window.localStorage.setItem("follows",JSON.stringify(this.follows))
      }else{
        this.$toast("无法关注自己")
      }

    },
    //快捷回复
    openSend(){
      let token = window.localStorage.getItem("token");
      if (!token) {
        this.$router.push("/login");
        return;
      }
      this.showInp=true

    },
    close(value){
      this.showInp = value
    },
    //发送评论
    send(txt){
      let token = window.localStorage.getItem("token");
      let userId = window.localStorage.getItem("userId");
      let tempCommentList = JSON.parse(window.localStorage.getItem("commentList"))
      if (!token) {
        this.$router.push("/login");
        return;
      }
      this.checkTxt = txt
      let comment = {
        contentId:this.infoList.id,
        userid:userId,
        username:'厨友'+userId,
        userimageid:"8877665544",
        text:txt
      }
      let commentList =tempCommentList==null?[]:tempCommentList
      commentList.push(comment)
      window.localStorage.setItem("commentList",JSON.stringify(commentList))
      this.infoList.comment.unshift(comment)
      this.infoList.commentCount = Number(this.infoList.commentCount) + 1
      if (this.infoList.comment.length>3) {
        this.infoList.comment.pop()
      }
      this.showInp = false
    },
    //跳转全部评论
    showAllCom(){
      let token = window.localStorage.getItem("token");
      if (!token) {
        this.$router.push("/login");
        return;
      }
      this.$router.push({path:"/allComment",query:{id:this.$route.query.id}})
    },
    //回退
    goback(){
      this.$router.go(-1)
      this.cookId = this.$route.query.id
      // window.localStorage.removeItem("scrollTop")
    },
    //跳转专辑页面
    goSortList(id){
      // console.log(this.$refs.scrollRef.scrollTop);
      this.$router.push({ path: "/novice", query: { id } });
      // window.localStorage.setItem("scrollTop",this.$refs.scrollRef.scrollTop)
    },
    //数据更新
    updateDate(arr){
      //浏览记录
      let tempHisWatch = JSON.parse(window.localStorage.getItem("watchHistory"))
      let watchHistory =tempHisWatch==null?[]:tempHisWatch
      let historyItem = {
        authorId:arr.authorid,
        id:arr.id,
        imageid:arr.imageid,
        name:arr.name
      }
      let isExist = watchHistory.findIndex(item=>item.id==arr.id)
      if (isExist==-1) {
        watchHistory.unshift(historyItem)
        window.localStorage.setItem("watchHistory",JSON.stringify(watchHistory))
      }
      //重置菜篮子状态
      let tempLzList = JSON.parse(window.localStorage.getItem("lzLists"))
      if (tempLzList) {
        this.lzLists = tempLzList
        let index = tempLzList.findIndex(item=>item.id===arr.id)
        if (index!=-1) {
          this.isBasket=false
        }
      }
      //重置关注
      let tempfollows = JSON.parse(window.localStorage.getItem("follows"))
      if (tempfollows) {
          this.follows = tempfollows
          let i = tempfollows.findIndex(item=>item.id==arr.authorid)
          if (i!=-1) {
              this.isfollow = true
          }
      }
    },
    //信息更新
    infoUpdate(arr){
      //重置收藏
        let tempCollectList = JSON.parse(window.localStorage.getItem("collectList"))
        if (tempCollectList) {
          this.collectList = tempCollectList
          let index = tempCollectList.findIndex(item=>item.id==this.$route.query.id)
          if (index!=-1) {
            arr.collectionCount = Number(arr.collectionCount)+1
            this.collectflag = true
          }
        }
        //重置点赞
        let tempLikeList = JSON.parse(window.localStorage.getItem("likeList"))
        if (tempLikeList) {
          this.likeList = tempLikeList
          let index = tempLikeList.findIndex(item=>item.id==this.$route.query.id)
          if (index!=-1) {
            arr.likeCount = tempLikeList[index].likeCount
            this.Dzflag = true
          }
        }
        //重置评论
        let tempCommentList = JSON.parse(window.localStorage.getItem("commentList"))
        if (tempCommentList) {
            tempCommentList.forEach(item=>{
              if (item.contentId == this.$route.query.id) {
                  arr.comment.unshift(item)
                  arr.commentCount = Number(arr.commentCount) + 1
                  if (arr.comment.length>3) {
                    arr.comment.pop()
                  }
              }
            })
        }
    }
  
  },
  created() {
    this.cookId = this.$route.query.id
    let works = JSON.parse(window.localStorage.getItem("works"))
    works = works==null?[]:works
    let index = works.findIndex(item=>item.id==this.cookId)
    if (index==-1) {
      // 获取菜品详情数据
      this.getDetailsFun(this.$route.query.id)
      //获取菜谱其他信息
      this.getRecipeInfoFun(this.$route.query.id)
      // 相关菜谱列表
      this.getRecipeRelatedListFun(this.$route.query.id)
      // 相关菜谱专辑列表
      this.getCollectionSortListFun(this.$route.query.id)
    }else{
      console.log(works[index]);
      setTimeout(() => {
        this.loading = false
      }, 400);

      this.detailList = works[index]
      this.updateDate(this.detailList)
      this.infoList = works[index].info
      this.infoUpdate(this.infoList)
      this.authorId = 123564
      this.relatedList = null
      this.collectionSortList = null
    }

  },
  // mounted() {
  //   this.$nextTick(()=>{
  //     let scrollY = window.localStorage.getItem("scrollTop")
  //     setTimeout(() => {
  //       if (scrollY) {
  //         this.$refs.scrollRef.scrollTop = scrollY
  //       }else{
  //         this.$refs.scrollRef.scrollTop = 0
  //       }
  //     }, 800);
  //   });
  // },
  watch:{
    cookId(oldvalue,value){
      // console.log(oldvalue,value);
      if (value!=null) {
        this.loading = true
        // 获取菜品详情数据
        this.getDetailsFun(value)
        //获取菜谱其他信息
        this.getRecipeInfoFun(value)
        // 相关菜谱列表
        this.getRecipeRelatedListFun(value)
        // 相关菜谱专辑列表
        this.getCollectionSortListFun(this.$route.query.id)
      }
    }
  },
  components:{
    SendView,
  }
};
</script>

<style lang="less">
.detail-page {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;

  .detail-bg{
    height: 100%;
  .top {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 99;
    height: 35px;
    padding: 5px;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    background-image: linear-gradient(#9d9fa3, transparent);

    .arrow-left {
      width: 15%;
      display: flex;
      align-items: center;

      & > img {
        width: 10px;
        height: 18px;
        display: inline-block;
        padding-left: 5px;
      }
    }

    .list-right {
      width: 50%;
      display: flex;
      justify-content: flex-end;
      align-items: center;

      & > img {
        padding: 0 15px;
        width: 20px;
        height: 20px;
        display: block;
      }

      .wechat {
        width: 23px;
      }

      .dots {
        height: 5px;
      }
    }
  }

  .content {
    height: 100%;
    overflow-y: scroll;

    .wrap-img {
      position: sticky;
      top: 0;
      height: 250px;

      & > img {
        height: 100%;
        display: block;
      }
    }

    .cuisine-info {
      position: relative;
      top: -5px;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
      background-color: #fff;
      margin-bottom: 55px;

      .details {
        padding-top: 25px;

        .cuisine-name {
          margin: 15px 0;

          & > h4 {
            font-size: 20px;
            font-weight: bold;
            letter-spacing: 1.2px;
          }
        }

        .hot-info {
          display: flex;

          .collect,
          .zan {
            color: #a3a3a3;
            font-size: 13px;
            font-weight: 600;
            padding-right: 20px;
          }
        }

        .person-info {
          margin: 15px 0;

          .head-top {
            margin-bottom: 15px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .hd-info {
              // width: 50%;
              display: flex;
              align-items: center;

              .hd-img {
                width: 30px;
                height: 30px;
                border-radius: 50%;
                overflow: hidden;
                margin-right: 10px;
              }

              .hd-name {
                font-size: 15px;
                font-weight: bold;
              }
            }

            .hd-gz {
              padding: 5px 10px;
              background-color: #fffbf2;
              border-radius: 12px;
              display: flex;
              align-items: center;

              & > img {
                width: 15px;
                height: 15px;
                display: block;
                margin-right: 2.5px;
              }

              .gz {
                font-size: 13px;
                color: #ffc000;
                font-weight: bold;
              }
            }
            .follow{
              background-color: #f2f2f2;

              .gz{
                color: #bfbfbf;
              }
            }
          }

          .head-btm {
            letter-spacing: 0.3px;
            line-height: 22px;
            font-size: 14px;
            color: #666;
            font-weight: bold;
          }
        }

        .nd-food {
          margin: 30px 0 30px 0;

          .nd-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;

            & > h4 {
              font-size: 16px;
              color: #000;
              font-weight: bold;
            }

            .lz {
              padding: 5px 10px;
              border: 1px solid #ffc000;
              display: flex;
              align-items: center;
              border-radius: 12px;

              & > img {
                width: 13px;
                height: 13px;
                display: block;
                margin-right: 5px;
              }

              .add-lz {
                color: #ffc000;
                font-size: 13px;
                font-weight: bold;
              }
            }
            .active{
              border: 1px solid #ccc;
              .add-lz {
                color: #ccc;
              }
            }
          }

          .nd-btm {
            padding: 0px 18px;

            .fd-item {
              padding: 12px 0 15px 0;
              display: flex;
              justify-content: space-between;
              align-items: center;
              border-bottom: 1px dashed #a8a8a8;

              & > span {
                color: #000;
                font-weight: 600;
              }
            }
            .maternone{
              display: none;
            }
            .fd-item:last-child {
              border: none;
            }
          }
        }

        .pr-step {
          .pr-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;

            & > h4 {
              font-size: 16px;
              color: #000;
              font-weight: bold;
            }

            .pr-in {
              display: flex;
              align-items: center;

              .pr {
                font-size: 14px;
                color: #a3a3a3;
                font-weight: 600;
              }

              & > img {
                width: 25px;
                height: 25px;
                display: block;
                margin-left: -10px;
              }
            }
          }

          .pr-step-list {
            .pr-step-item {
              margin: 15px 0 35px 0;

              .sp {
                margin-bottom: 20px;
                font-size: 15px;
                font-weight: bold;
                color: #333;

                .all-steps {
                  font-size: 13px;
                  color: #a3a3a3;
                  font-weight: 0;
                }
              }

              .step-img {
                border-radius: 8px;
                overflow: hidden;

                .big {
                  height: 100%;
                  position: fixed;
                  top: 0;
                  left: 0;
                  right: 0;
                  // bottom: 0;
                  width: 100%;
                  min-height: 667px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  background-color: #000;
                  z-index: 100;
                  overflow: hidden;

                  .img {
                    width: 100%;
                    height: 300px;
                    // background-image: url("https://pic.ecook.cn/web/259156452.jpg!wl280");
                    background-position: center center;
                    background-repeat: no-repeat;
                    background-size: cover;
                    background-color: #fff;
                  }
                }
              }

              .step-tips {
                margin-top: 15px;
                font-size: 16px;
                font-weight: 600;
                letter-spacing: 0.8px;
                line-height: 25px;
                white-space: pre-wrap;//pre-wrap 保留空白符序列，但是正常地进行换行。
              }
            }
          }
        }

        .lt-tips {
          margin: 48px 15px 40px 15px;
          background-color: #f9f9f9;
          border-radius: 8px;

          .tips-content {
            padding: 10px;

            .tips-title {
              display: flex;
              align-items: center;

              & > img {
                width: 30px;
                height: 30px;
                display: block;
                margin-right: 8px;
              }

              .tips-name {
                font-weight: bold;
                font-size: 16px;
              }
            }

            .txt {
              padding: 15px 10px 0 5px;

              & > li {
                font-size: 14px;
                line-height: 25px;
                font-weight: 600;
                color: #505050;
                letter-spacing: 0.8px;
              }
            }
          }
        }

        .relate-cuisine {
          .title {
            font-size: 16px;
            color: #000;
            font-weight: bold;
            margin: 5px 0 25px 0;
          }

          .rela-lists {
            margin-bottom: 48px;
            overflow-x: scroll;
            overflow-y: hidden;
            white-space: nowrap;

            .rela-list-item {
              display: inline-block;
              width: 185px;
              margin-right: 10px;

              .item-img {
                width: 100%;
                height: 120px;
                margin-bottom: 15px;
                border-radius: 8px;
                overflow: hidden;

                .img {
                  width: 185px;
                  height: 120px;
                  background-repeat: no-repeat;
                  background-position: center center;
                  background-size: cover;
                }
              }

              .c-name {
                margin-bottom: 8px;
                font-size: 14px;
                font-weight: 600;
                color: #4d4d4d;
                letter-spacing: 0.8px;
              }

              .p-name {
                font-size: 12px;
                color: #c0c0c0;
                font-weight: 600;
                letter-spacing: 0.8px;
              }
            }

            .rela-list-item:first-child {
              margin-left: 15px;
            }

            &::-webkit-scrollbar {
              display: none;
            }
          }
        }

        .zp {
          margin-bottom: 48px;

          .zp-title {
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .title {
              font-size: 16px;
              color: #000;
              font-weight: bold;
            }

            .more {
              display: flex;
              align-items: center;

              .m {
                display: block;
                font-size: 13px;
                color: #909090;
                font-weight: 600;
                line-height: 20px;
              }

              & > img {
                width: 18px;
                height: 18px;
                display: block;
                margin-left: -8px;
              }
            }
          }
          .zpCon{
            width: 100%;
            overflow-x: scroll;
            display: flex;
            .zpItem {
              flex:0 0 130px;
              margin-bottom: 15px;
              margin-right: 15px;
            .img{
              width: 100%;
              height: 90px;
              border-radius: 7px;
              overflow: hidden;
            }
            .zpTitle{
              font-size: 14px;
              line-height: 22px;
              font-weight: bold;
              letter-spacing: 0.5px;
              margin: 10px 0 5px 0;
            }
            .zpAuthor{
              font-size: 13px;
              color: #999;
              letter-spacing: 0.5px;
              font-weight: bold;
              line-height: 22px;
            }
            }
            .zpItem:last-child{
              margin-right: 0;
            }
          }
          .send-zp {
            padding: 8px 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 24px;
            background-color: #ffc000;

            & > img {
              width: 25px;
              height: 25px;
              display: block;
              margin-right: 8px;
            }

            .send {
              color: #fff;
              font-weight: 600;
              font-size: 14px;
              letter-spacing: 1px;
            }
          }
        }

        .pl {
          margin-bottom: 48px;

          .pl-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px;

            .title {
              font-size: 16px;
              color: #000;
              font-weight: bold;
            }

            .more {
              display: flex;
              align-items: center;

              .m {
                display: block;
                font-size: 13px;
                color: #909090;
                font-weight: 600;
                line-height: 20px;
              }

              & > img {
                width: 18px;
                height: 18px;
                display: block;
                margin-left: -8px;
              }
            }
          }

          .pl-lists {
            margin-top: 25px;

            .pl-item {
              margin-bottom: 15px;
              display: flex;
              justify-content: flex-start;

              .pl-img {
                width: 27px;
                height: 27px;

                & > img {
                  width: 27px;
                  height: 27px;
                  display: block;
                  border-radius: 50%;
                }
              }

              .pl-msg {
                margin-left: 10px;
                display: flex;
                flex-direction: column;

                .msg-name {
                  padding: 2px 0 10px 0;
                  color: #ffc000;
                }

                .msg {
                  font-size: 14px;
                  padding-top: 5px;
                  color: #000;
                  line-height: 25px;
                  letter-spacing: 0.8px;
                }
              }
            }
          }

          .pl-btm-ipn {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 20px;
            border-radius: 22px;
            background-color: #f7f7f7;

            .rep {
              color: #999;
              font-size: 13px;
              font-weight: 600;
              letter-spacing: 1.2px;
            }

            .emo {
              display: flex;

              & > img {
                width: 15px;
                height: 15px;
                display: block;
                padding: 0 10px;
              }

              & > img:last-child {
                padding-right: 0;
              }
            }
          }
        }

        .fd-album {
          .title {
            margin-bottom: 30px;
            font-size: 16px;
            color: #000;
            font-weight: bold;
          }

          .fd-album-list {
            overflow-x: scroll;
            overflow-y: hidden;
            white-space: nowrap;

            .fd-album-item {
              display: inline-block;
              position: relative;
              width: 280px;
              height: 160px;
              margin-right: 10px;

              .album-img {
                width: 280px;
                height: 160px;
                border-radius: 8px;
                overflow: hidden;
                background-position: center center;
                background-repeat: no-repeat;
                background-size: cover;
              }

              .album-info {
                width: 100%;
                height: 80px;
                position: absolute;
                left: 0;
                bottom: 0;
                border-bottom-left-radius: 8px;
                border-bottom-right-radius: 8px;
                background-image: linear-gradient(transparent, #616169);

                & > h4 {
                  padding-left: 10px;
                  font-size: 16px;
                  color: #fff;
                  font-weight: bold;
                  margin-top: 20px;
                  margin-bottom: 15px;
                }

                .album-txt {
                  display: block;
                  padding-left: 10px;
                  color: #fff;
                  font-size: 13px;
                  letter-spacing: 0.8px;
                }
              }
            }

            .fd-album-item:first-child {
              margin-left: 15px;
            }

            &::-webkit-scrollbar {
              display: none;
            }
          }
        }
      }
    }

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    height: 50px;
    background-color: #fff;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .bt {
      display: flex;
      align-items: center;

      & > img {
        width: 20px;
        height: 20px;
        display: block;
        margin-right: 5px;
      }

      & > span {
        font-size: 14px;
        font-weight: 600;
      }
      .checked {
        color: #ffc000;
      }
    }

    .btm-collet,
    .btm-zan {
      & > img {
        width: 15px;
        height: 15px;
      }
    }

    .btm-collet {
      padding: 6px 10px;
      background-color: #ffc000;
      border-radius: 12px;

      & > span {
        color: #fff;
        font-size: 13px;
      }
    }
    .bt-collect {
      background-color: #f2f2f2;

      & > span {
        color: #999;
        font-size: 13px;
      }
    }
  }
  }
  .loading{
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;

    .loadingImg{
      width: 60px;
      height: 60px;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0px 0px 5px #ccc;
      display: flex;
      align-items: center;
      justify-content: center;

      &>img{
        width: 22px;
        height: 22px;
        display: block;
      }
    }
  }
}

</style>